<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
  import echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import {debounce} from '@/utils'

  const animationDuration = 3000

  export default {
    props: {
      statistics: {
        type: Object,
        'default': {}
      },
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '600px'
      }
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      statistics: function (newVal) {
        if (Object.keys(newVal).length !== 0) {
          this.initChart();
        }
      }
    },
    mounted() {
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100);
      window.addEventListener('resize', this.__resizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHandler)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        var data = [
          {
            name: 'cpu使用率',
            value: this.statistics.cpuUsage
          }, {
            name: '磁盘使用率',
            value: this.statistics.diskUsage
          }, {
            name: '内存使用率',
            value: this.statistics.memoryUsage
          }]

        var titleArr = [],
          seriesArr = [],
          colors = [['#389af4', '#dfeaff'],
            ['#ff8c37', '#ffdcc3'],
            // ['#ffc257', '#ffedcc'],
            // ['#fd6f97', '#fed4e0'],
            ['#a181fc', '#e3d9fe']];
        data.forEach(function (item, index) {
          titleArr.push(
            {
              text: item.name,
              left: '50%',
              top: index * 33.3 + 25 + '%',
              textAlign: 'center',
              textStyle: {
                fontWeight: 'normal',
                fontSize: '16',
                color: colors[index][0],
                textAlign: 'center',
              },
            }
          );
          seriesArr.push(
            {
              name: item.name,
              type: 'pie',
              clockWise: false,
              radius: [50, 65],
              itemStyle: {
                normal: {
                  color: colors[index][0],
                  shadowColor: colors[index][0],
                  shadowBlur: 0,
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                }
              },
              hoverAnimation: false,
              center: ['50%', index * 33.3 + 13 + '%'],
              data: [{
                value: item.value,
                label: {
                  normal: {
                    formatter: function (params) {
                      return params.value + '%';
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold',
                      color: colors[index][0]
                    }
                  }
                },
              }, {
                value: 100 - item.value,
                name: 'invisible',
                itemStyle: {
                  normal: {
                    color: colors[index][1]
                  },
                  emphasis: {
                    color: colors[index][1]
                  }
                }
              }]
            }
          )
        });
        this.chart.setOption({
          backgroundColor: "#fff",
          title: titleArr,
          series: seriesArr
        })
      }
    }
  }
</script>
